<template>
    <div>标题</div>
    <p class="subtitle">
        <span>发表时间</span>
        <span>点击：0次</span>
    </p>

    <hr>
<!--    缩略图区域-->
    <div class="thumbs">
        <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
    </div>
<!--    图片内容-->
    <div class="content"></div>

<!--    放置评论子组件 子组件显示必写-->
    <cmt-box :id="id"></cmt-box>
</template>

<script>
    // 导入评论子组件
    import comment from "../subcomponents/comment.vue";

    export default {
        name: "Photoinfo",
        data(){
            return{ //从url中获取页面id
                id:this.$route.params.id,
                list:[]
            }
        },
        created() {
        },
        components:{  //组册子组件    从别的地方引入的组件要在方法里面加上子组件
            'cmt-box':comment
        },
        methods:{
            getThumbs(){
                this.$http.get('api/...'+this.id).then(result=>{
                    if(result.body.status===0){
                        //循环每个图片 补全图片的宽和高
                        result.body.message.forEach(item=>{
                            item.w = 600;
                            item.x=400;
                        });
                        this.list = result.body.message
                    }
                })
            }
        }

    }
</script>

<style scoped>

</style>